<template>
	<view>
		<u-form-item :prop="item.model" :label="item.label" v-bind="$attrs" @click="pickerShow(item)"
			:borderBottom="item.borderBottom">
			<!-- 输入框 -->
			<u--input v-bind="$attrs" v-on="$listeners" style="width: 100%" v-if="item.type === 'input'"></u--input>
			<!-- picker -->
			<u--input disabledColor="#ffffff" disabled v-bind="$attrs" v-model="item.text" v-on="$listeners"
				v-if="item.type === 'picker'"></u--input>
			<u-icon v-if="item.type === 'picker'" slot="right" name="arrow-right"></u-icon>
			<u-picker @cancel="pickerCancel(item)" @confirm="pickerConfirm($event, item)" keyName="label"
				v-on="$listeners" v-bind="$attrs" v-if="item.type === 'picker'"></u-picker>
			<!-- textarea -->
			<u--textarea class='text' v-bind="$attrs" @input="textareaChange" :confirmType="'done'" style="width: 100%"
				v-if="item.type === 'textarea'"></u--textarea>
			<!-- 日期 -->
			<u--input disabledColor="#ffffff" disabled v-bind="$attrs" v-model="item.text" v-on="$listeners"
				v-if="item.type === 'datetime'"></u--input>
			<u-icon v-if="item.type === 'datetime'" slot="right" name="arrow-right"></u-icon>
			<u-datetime-picker :minDate="newData" ref="datetimePicker" v-bind="$attrs" v-if="item.type === 'datetime'"
				@cancel="datetimeCancel(item)" @confirm="datetimeConfirm($event, item)">
			</u-datetime-picker>
			<u-upload ref="upload" v-bind="$attrs" :fileList="fileList1" v-if="item.type === 'upload'"
				@afterRead="afterRead" @delete="deletePic" name="1"></u-upload>
		</u-form-item>

	</view>
</template>

<script>
	export default {
		props: ["item"],
		data() {
			return {
				newData: new Date().getTime(),
				model1: {
					name: "",
				},
				fileList1: [],
			};
		},
		methods: {
			textareaChange(value) {
				this.$emit("textareaChange", {
					item: this.item,
					value
				});
			},
			pickerShow(item) {
				item.show = true;
			},
			pickerConfirm(e, item) {
				item.show = false;
				item.text = e.value[0].label;
				this.$emit("pickerConfirm", {
					item,
					value: e.value[0].id
				});
			},
			pickerCancel(item) {
				item.show = false;
			},
			datetimeConfirm(e, item) {
				const timeFormat = uni.$u.timeFormat;
				item.show = false;
				item.text = timeFormat(e.value, "yyyy-mm-dd hh:MM");
				// this.$emit("datetimeConfirm", {
				//   item,
				//   value: e,
				// });
			},
			datetimeCancel(item) {
				item.show = false;
			},

			// 图片选择
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.$emit("deletePic", {
					model: this.item.model,
					data: this.fileList1,
				});
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.url,
						})
					);
					fileListLen++;
				}
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let that = this;
					let a = uni.uploadFile({
						url: this.item.url, // 仅为示例，非真实的接口地址
						filePath: url,
						header: {
							Authorization: `Bearer ${uni.getStorageSync("token")}`,
						},
						name: "file",
						formData: {},
						success: (res) => {
							setTimeout(() => {
								let data = JSON.parse(res.data);
								if (data.code === 200) {

									that.$emit("uploadFileSuccess", {
										model: this.item.model,
										data: this.fileList1,
									});
								}
								resolve(data);
							}, 1000);
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item__body__right__content__slot {
		.u-input {
			flex: 1;
		}
	}

	// ::v-deep .u-form-item__body__right{
	// 	flex: 1;
	// }
	.text {
		background-color: #f6f6f6;
	}
</style>
